<template>
  <div class="goodclassedit">
    <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="close"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="分类排序">
          <el-input v-model="form.sort" type="number" placeholder="请输入分类排序"></el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="name" :required="true">
          <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="分类图标">
          <div class="uploadSource bor_de rel flex" v-if="form.icon">
            <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
              <i class="el-icon-check" ref="imgicon1"></i>
              <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
            </label>
            <img :src="form.icon" @click='test(1)' class="wid"/>
          </div>
          <div class="uploadSource flex-center curs" v-else @click='test(1)'>
            <i class="el-icon-plus fon_40 color_d9"></i>
          </div>
          <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import attachmentImg from "@/plugins/attachment-img";
import {saveSpecial} from "@/api/good";

export default {
  name: "goodlistedit",
  components: {attachmentImg,},
  created() {
  },
  data() {
    return {
      form: {
        id: '',
        pid: '',
        sort: '1',
        name: '',
        describe: '',
        icon: '',
      },
      title: "",
      dialogFormVisible: false,
      type: '',
    }
  },
  methods: {
    showEdit(row) {
      this.title = "编辑";
      this.form = Object.assign({}, row);
      this.form.type = this.type
      this.dialogFormVisible = true;
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none'
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block'
    },
    test(i = 0) {
      console.log(this.$refs, i)
      this.$refs['img' + i].dialogVisible = true
    },
    imgadd1(url) {
      this.form.icon = url.str
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (!type) {
        switch (index) {
          case 1:
            this.form.icon = '';
            break
        }
      }
    },
    close() {
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    setStoreId(storeId) {
      this.form.storeId = storeId
    },
    setInType(type) {
      this.form.type = type
      this.type = type
    },
    save() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          // console.log(this.form)
          const {msg} = await saveSpecial(this.form);
          this.$baseMessage(msg, "success");
          this.$emit("fetchData");
          this.close();
        } else {
          return false;
        }
      });
    },
  }
};
</script>
